<template>
    <div v-if="show" class="modal-overlay" @click.self="handleOverlayClick">
        <div class="modal" :style="{ width: width, maxWidth: maxWidth }">
            <div class="modal-header">
                <view>
                    <h3>{{ title }}</h3>
                </view>
                <view><button class="close-btn" @click="handleClose">×</button></view>


            </div>
            <div class="modal-content">
                <slot></slot>
            </div>
        </div>
    </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
    show: {
        type: Boolean,
        default: false
    },
    title: {
        type: String,
        default: ''
    },
    width: {
        type: String,
        default: '80%'
    },
    maxWidth: {
        type: String,
        default: '500px'
    },
    closeOnClickOverlay: {
        type: Boolean,
        default: true
    }
})

const emit = defineEmits(['update:show', 'close'])

const handleClose = () => {
    emit('update:show', false)
    emit('close')
}

const handleOverlayClick = () => {
    if (props.closeOnClickOverlay) {
        handleClose()
    }
}
</script>

<style scoped>
.modal-overlay {
    direction: rtl;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal {
    background-color: #1d1d1d;
    border-radius: 8px;
    max-height: 80vh;
    overflow: hidden;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #333;
    background-color: #1d1d1d;
}

.modal-header h3 {
    color: #fff;
    font-size: 16px;
}

.close-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.close-btn:hover {
    background-color: #333;
    border-radius: 50%;
}

.modal-content {
    padding: 20px;
    color: #fff;
}
</style>